<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <el-button size="mini" type="primary" @click.native="submitForm">提 交</el-button>
        <el-button size="mini" @click.native="cancel(false)">取 消</el-button>
      </div>
    </div>
    <el-scrollbar :style="customeStyle">
      <el-form ref="myForm" :model="form" :label-width="labelForm.labelWidth" :label-position="labelForm.labelPosition">
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称" :prop="'DepartmentName'" :rules="{
                  required: true, message: '请输入', trigger: 'change'}">
              <el-input v-model="form.DepartmentName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="组织类别" :prop="'DepartmentType'" :rules="{
                  required: true, message: '请输入', trigger: 'change'}">
              <el-radio-group v-model="form.DepartmentType">
                <el-radio :label="1">公司</el-radio>
                <el-radio :label="2">部门</el-radio>
                <el-radio :label="3">岗位</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属上级">
              <el-cascader v-model="form.ParentIds" :options="parentData"
                :props="{checkStrictly: true,value:'Id',label:'Name'}" clearable>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    getDepartment,
    saveDepartment,
  } from '@/api/users/department'
  import defaultSettings from '@/settings'
  export default {
    name: 'department-edit',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        labelForm: defaultSettings.labelForm,
        form: {
          Id: 0,
          DepartmentType: 1,
          DepartmentName: '',
          ParentId: 0,
          ParentIds: []
        },
        parentData: []
      }
    },
    created() {
      this.getData()
    },
    methods: {
      /** 查询列表 */
      getData() {
        getDepartment(this.Id).then(res => {
          if (res.status) {
            var model = res.outputData.model
            this.form.Id = model.Id;
            this.form.DepartmentType = model.DepartmentType > 0 ? model.DepartmentType : 1;
            this.form.DepartmentName = model.DepartmentName;
            if (model.ParentIds) {
              this.form.ParentIds = JSON.parse(model.ParentIds)
            }
            this.parentData = res.outputData.parentData;
          }
        })
      },
      submitForm() {
        var that = this;
        var postForm = {
          Id: this.form.Id,
          ParentIds: JSON.stringify(this.form.ParentIds),
          DepartmentName: this.form.DepartmentName,
          DepartmentType: this.form.DepartmentType
        }
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            saveDepartment(postForm).then(res => {
              if (res.status) {
                this.$message({
                  message: this.form.Id > 0 ? '修改成功' : '新增成功',
                  type: 'success'
                })
                this.cancel(true);
              }
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doCloseDetail", reload)
      }
    }
  }
</script>
